<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="登录">
      <van-icon slot="left" name="arrow-left" @click="onClickBack" />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 登录表单 -->
    <van-form @submit="onSubmit" ref="refForm">
      <van-field
        name="mobile"
        placeholder="请输入手机号"
        v-model="mobile"
        :rules="[
          { required: true, message: '请输入手机号码' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
        ]"
      >
        <!-- 这个是 Vue2.6 之前的旧版插槽语法 -->
        <!-- slot="插槽名称" -->
        <!-- <i slot="left-icon" class="toutiao toutiao-shouji"></i> -->
        <!-- # 是 v-slot: 的缩写形式 -->
        <template #left-icon>
          <i class="toutiao toutiao-shouji" />
        </template>
      </van-field>
      <van-field
        name="code"
        placeholder="请输入验证码"
        v-model="code"
        :rules="[
          { required: true, message: '请输入验证码' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' },
        ]"
      >
        <!-- <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i> -->
        <template #left-icon>
          <i class="toutiao toutiao-yanzhengma" />
        </template>
        <template #button>
          <!-- round：圆角 -->
          <!-- 坑：点击发送验证码按钮也会触发表单的 submit 事件，是因为 button 如果不指定原生的按钮类型，那么就会有点击提交表单的默认行为 -->
          <!-- native-type="button" 指定这个按钮为普通的按钮，不要在点击时触发默认提交表单的行为 -->
          <van-button
            :loading="isLoadingOfSendSMS"
            loading-text="短信发送中..."
            class="send-sms-btn"
            round
            size="small"
            type="default"
            native-type="button"
            @click="onClickSendVCodeBtn"
          >
            <span v-if="!isShowCountDown">发送验证码</span>
            <van-count-down
              v-else
              :time="6 * 1000"
              format="ss秒后重新获取"
              @change="onChangeOfCountDown"
            />
          </van-button>
          <!-- 单位是毫秒 -->
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <!-- /登录表单 -->
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      // 是否加载中，对于发送短信验证码而言
      isLoadingOfSendSMS: false,
      // 是否显示倒计时
      isShowCountDown: false,
      mobile: '',
      code: '',
    }
  },
  computed: {
    canBack() {
      return window.history.length > 2
    },
  },
  methods: {
    onClickBack() {
      if (window.history.length > 2) {
        // 说明有历史记录
        this.$router.back()
      } else {
        // 没历史记录，说明一进来就直接访问的登录页，那么就跳首页去
        this.$router.push({ name: 'home' })
      }
    },
    // 发送验证码按钮的点击事件处理函数
    onClickSendVCodeBtn() {
      if (this.isShowCountDown) {
        // 如果正在倒计时，要直接 return，不用再次执行下面的代码
        return
      }
      // 这里如果重复去写校验代码，未免太 low 了，所以，如果有一个 api 能够让我们使用 vant 组件库的校验规则就好了
      // if (this.mobile === '') alert('请求输入手机号码')
      // if (// . test(this.mobile))
      // 首先要判断用户是否有输入手机号码，并且格式是否正确
      // 如果ok才会发请求
      // 发请求，请求成功，将按钮隐藏，倒计时开始，请求失败，给出错误提示

      // 获取到 van-form 组件实例，然后调用其 validate 方法进行验证
      this.$refs.refForm.validate('mobile').then(() => {
        // 如果能够进入这个回调函数，说明 手机号码是正确的
        console.log('正确')
        // 发送请求前，加载中转起来
        this.isLoadingOfSendSMS = true
        // TODO: 调用发送验证码的接口
        this._apis.user
          .sendSMS(this.mobile)
          // // 让接口延迟 3s 响应
          // .then(() => {
          //   return new Promise(resolve => {
          //     setTimeout(resolve, 3000)
          //   })
          // })
          .then(
            () => {
              // 如果能够进入到这里，就说明发送成功
              // 如果成功了，要做什么？要开启倒计时
              this.isShowCountDown = true
            },
            err => {
              // 发送失败，提示错误消息
              // console.log(err, 'err')
              this.$toast.fail(err.response.data.message)
            }
          )
          .finally(() => {
            // 不管 promise 的状态变成 fulfilled 还是 rejected 都会执行这个回调函数
            this.isLoadingOfSendSMS = false
          })
      })
    },
    // 当倒计时时间发生变化时触发
    onChangeOfCountDown(timeData) {
      console.log(timeData, 'timeData')
      if (timeData.seconds === 0 && timeData.milliseconds !== 0) {
        console.log('结束了')
        this.isShowCountDown = false
      }
    },
    // 当倒计时结束时，会自动触发
    // onFinish() {
    //   alert(1)
    // },
    onSubmit(values) {
      console.log('submit', values)
      // 如果能够进入到这里，说明表单校验通过
      // 在这里发请求调后台接口，如果成功，就跳转到首页，如果失败，就给出错误提示

      // this.$toast.loading({
      //   message: '加载中...',
      //   forbidClick: true,
      //   duration: 0, // 持续时间, 0 表示一直不关闭，默认 2000ms 后会自动关闭
      // })

      const p3 = this.$store.dispatch('user/login', values)
      p3.then(
        res => {
          // 这个 res 就是上一个 .then 成功的回调函数的返回值
          this.$toast.success('登录成功')
          // 跳转到首页
          this.$router.push({ name: 'my' })
        },
        // 请求失败，弹出后台接口响应的错误消息
        err => {
          this.$toast.fail(err.response.data.message)
        }
      )
    },
  },
}
</script>
<style scoped lang="less">
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    // width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>
